<template>
	<view class="share-wrapper">
		<top-nav title="邀请有奖"></top-nav>
		<view class="banner"></view>
		<view class="content">
			<view class="qrcode">
				<!-- <l-painter :board="base"></l-painter> -->
				<canvas canvas-id="qrcode" style="width: 570rpx;height: 354px;" />
			</view>
			<view class="code">
				<view class="info">{{userInfo.invite_code}}</view>
				<view class="icon" @click="copy()"></view>
			</view>
		</view>
		<view class="btn-wrapper">
			<view class="save" @click="previewImage()">保存图片</view>
			<view class="invite">立即邀请</view>
		</view>
		<view class="bottom-wrapper">
			<view class="desc">没找到需要的？点一下试试</view>
			<view class="sub-btn">
				<view class="btn" @click="gotoRule()">如何下载</view>
				<view class="btn" @click="gotoPage('/pages/home/home')">首页</view>
				<view class="btn" @click="gotoRule()">如何收钱</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
	import lPainter from '../../components/lime-painter/index.vue'
	export default{
		data(){
			return {
				qrcode:'',
				userInfo:{},
				base: {
					width:'570rpx',
					height:'570rpx',
					views: []
				}
			}
		},
		components:{
			topNav:topNav,
			lPainter:lPainter
		},
		mounted() {
			// this.$u.post('/api/getInvite', {account_id:uni.getStorageSync('account_id')}).then(res=>{
			// 	if(res.code==200){
			// 		this.dataInfo = {
			// 			direct_push:res.data.direct_push,
			// 			team_sum:res.data.team_sum,
			// 			active_sum: res.data.active_sum,
			// 			device_sum: res.data.device_sum,
			// 		};
			// 		this.team = res.data.list
			// 	} else {
			// 		this.$refs.uToast.show({
			// 			title: res.message,
			// 			type: 'error',
			// 		})
			// 	}
			// })
			this.userInfo = uni.getStorageSync('userInfo')
			this.make();
		},
		methods:{
			make(){
				// 回调方式
			  uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: this.userInfo.invite_code,
				size: 285,
				margin: 10,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				success: res => {
				  this.qrcode = res
				}
			  })
			},
			previewImage(){
				this.$refs.uToast.show({
					title: '点击了图片预览',
					type: 'success',
				})
				var imgArr = [];
				imgArr.push(this.qrcode)
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});

			},
			gotoPage(path){
				uni.redirectTo({
				    url: path
				});
			},
			copy(){
				 uniCopy({
					content:'这个是复制的内容',
					success:(res)=>{
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error:(e)=>{
						uni.showToast({
							title: e,
							icon: 'none',
							duration:3000,
						})
					}
				})
			},
			gotoRule(path){
				uni.navigateTo({
				    url: '/pages/rule/rule'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share-wrapper{
		.banner{
			width:100%;
			height:128*2rpx;
			margin-top:26*2rpx;
			background-image: url('/static/share/banner.png');
			background-size: 100% 100%;
		}
		.content{
			margin:-24*2rpx 25*2rpx 31*2rpx;
			background:#121212;
			padding:40rpx;
			.u-image{
				margin: 0 auto;
			}
			.code{
				margin-top:32*2rpx;
				width: 570rpx;
				height: 40*2rpx;
				background: rgba(105, 218, 115, 0.1);
				border-radius: 40rpx;
				border: 1px solid #69DA73;
				display:flex;
				align-items: center;
				justify-content: center;
				position:relative;
				font-size:14*2rpx;
				color:#CCCCCC;
				margin-bottom:20*2rpx;
				.icon{
					position:absolute;
					width: 15*2rpx;
					height:19*2rpx;
					background-image: url('/static/share/icon.png');
					background-size: 100% 100%;
					right:32*2rpx;
					top:50%;
					margin-top:-19rpx;
				}
			}
		}
		.btn-wrapper{
			padding:0 50*2rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom:107*2rpx;
			.save{
				width: 120*2rpx;
				height: 44*2rpx;
				background: #69DA73;
				border-radius: 3*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.invite{
				width: 120*2rpx;
				height: 44*2rpx;
				background: #FFB721;
				border-radius: 3*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.bottom-wrapper{
			position:fixed;
			bottom:0;
			width:100%;
			height:70*2rpx;
			background-color: #202020;
			text-align:center;
			.desc{
				color:#69DA73;
				font-size:13*2rpx;
				margin-bottom:26rpx;
			}
			.sub-btn{
				display: flex;
				justify-content: space-between;
				padding:0 60*2rpx;
				.btn{
					padding:0 24rpx;
					height:50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 25rpx;
					font-size:12*2rpx;
					background-color: rgba(255,255,255,0.1);
				}
			}
		}
	}
</style>
